/* eslint-disable no-irregular-whitespace */
<template>
  <div class="container">
    <div class="logo-box">
      <div class="title">懂钱弟</div>
      <div class="vertical-hr"></div>
      <div class="introduction">做您身边最懂贷款的朋友</div>
    </div>
    <div class="banner-money">
      <div class="label">您最高可以借（元）</div>
      <div class="max-borrow">
        <div class="icon"><img :src="getRequireImg('￥@2x')" alt=""></div>
        <div class="number">
          {{money}}
          <!-- <input type="text" v-model="money"> -->
        </div>
      </div>
    </div>
    <div class="banner-top-box">
      <div class="attr-li attr-1">
        <div class="label">限时降息</div>
        <div class="text">
          <div>APR最低年化率为<span>7%</span>起（单利）</div>
          <div>借1万元日息低至<span>2</span>元</div>
        </div>
      </div>
      <div class="attr-li attr-2">
        <div class="label">还款规则</div>
        <div class="text">当日借款、次日可还、按日计费</div>
      </div>
      <div class="attr-li attr-2">
        <div class="label">借款期限</div>
        <div class="text">3、6、12期灵活选</div>
      </div>
    </div>
    <div class="">
      <ComponentNewFormSms :data="data" :protocol="protocol" />
    </div>
    <div>
      <div class="hr"></div>
      <div style="height:12px;width:100%;"></div>
    </div>
    <div class="footer-img">
      <div class="footer-title">
        <div class="footer-title-img"><img :src="getRequireImg('hua-bian-zuo@2x')" alt=""></div>
        <div class="footer-title-text">关于我们</div>
        <div class="footer-title-img"><img :src="getRequireImg('hua-bian-you@2x')" alt=""></div>
      </div>
      <div class="footer-lists">
        <div class="footer-li">
          <div class="footer-li-icon"><img :src="getRequireImg('men-kan-di@2x')" alt=""></div>
          <div class="footer-li-title">门槛低</div>
          <div class="footer-li-text">0抵押0担保，只需身份证即可</div>
        </div>
        <div class="footer-li">
          <div class="footer-li-icon"><img :src="getRequireImg('an-quan-bao-zhang@2x')" alt=""></div>
          <div class="footer-li-title">安全保障</div>
          <div class="footer-li-text">信息加密，隐私保障合作持牌机构放款</div>
        </div>
        <div class="footer-li">
          <div class="footer-li-icon"><img :src="getRequireImg('jing-zhun-pi-pei@2x')" alt=""></div>
          <div class="footer-li-title">精准匹配</div>
          <div class="footer-li-text">精准服务，有效提升审批通过率</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>具体放款金额及放款时间视个人情况而定</p>
      <p>贷款有风险,申请需谨慎!</p>
      <p>货款服务由合作持牌机构提供</p>
      <p class="icp">ICP备案123617823618273</p>
    </div>
  </div>
</template>

<script>
  /*global $ returnCitySN require ClipboardJS wx err process*/
  import { isTelPhone, getUA, getImg, isIDCard } from "@/service/util.helper";
  import ComponentNewFormSms from '@/components/ComponentNewFormSms'
  export default {
    components: {
      ComponentNewFormSms
    },
    props: {
      data: {
        type: [Object],
        default: () => {
          return {}
        }
      },
      protocol: {
        type: [Object],
        default: () => {
          return {}
        }
      },
    },
    data() {
      return {
        check: true,
        money: "200,000"
      }
    },
    methods: {
      getRequireImg(name, is64 = 0) {
        let imgObj = {
          name: name,
          is64: is64,
          download_page: this.data.download_page,
          flooring_page: this.data.flooring_page,
        };
        return getImg(imgObj)
      },
    },
    mounted(){
      
    },
  }
</script>

<style lang="scss" >
.page-promote-view.temp167{
  .container {
    .logo-box{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 25px;
      margin-top: 23px;
      margin-bottom: 25px;
      background-color: #fff;
      padding: 0 12px;
      .title{
        color: #3478F2;
        font-size: 18px;
      }
      .vertical-hr{
        margin: 0 7px;
        width: 1px;
        height: 13px;
        background-color: #707070;
      }
      .introduction{
        color: #969799;
        font-size: 14px;
      }
    }

    .banner-money{
      border-bottom: 1px solid #CDD0D6;
      margin-bottom: 23px;
      background-color: #fff;
      padding: 0 12px;
      .label{
        font-size: 14px;
        color: #464646;
        font-weight: bold;
        margin-bottom: 9px;
      }
      .max-borrow{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 56px;
        .icon{
          width: 30px;
          height: 30px;
          margin-right: 12px;
          img{
            max-width: 100%;
            display: block;
          }
        }
        .number{
          font-size: 40px;
          color: #FC1F1F;
          input{
            border: 0;
            display: block;
            font-size: 40px;
            color: #FC1F1F;
            width: 80%;
          }
        }
      }
    }

    .banner-top-box{
      background-color: #fff;
      padding: 0 12px;
      .attr-li{
        display: flex;
        align-items: center;
      }
      .attr-1{
        justify-content: flex-start;
        margin-bottom: 13px;
        height: 34px;
        .label{
          background-color: #F1B941;
          border-radius: 20px 20px 20px 0px;
          height: 30px;
          width: 90px;
          line-height: 30px;
          text-align: center;
          margin-right: 26px;
          font-size: 14px;
          color: #fff;
        }
        .text{
          line-height: 17px;
          font-size: 12px;
          color: #464646;
          span{
            color: #FC1F1F;
          }
        }
      }
      .attr-2{
        justify-content: space-between;
        margin-bottom: 12px;
        height: 22px;
        color: #333;
        font-weight: bold;
        .label{
          font-size: 16px;
        }
        .text{
          font-size: 14px;
        }
      }
    }

    .form{
      margin-bottom: 20px;
      background-color: #fff;
      padding: 0 12px;
      li{
        margin-bottom: 12px;
      }
      .icon-box{
        position: relative;
        .icon{
          position: absolute;
          left: 20px;
          top: 16px;
          img{
            display: block;
            width: 14px;
          }
        }
      }
      .put{
        height: 52px;
        display: block;
        border: 1px solid #707070;
        border-radius: 4px;
        width: 100%;
        padding-left: 46px;
      }
      .submit{
        .btn-submit{
          display: block;
          background-image:linear-gradient(#43C8FE, #017EFF);
          width: 100%;
          height: 52px;
          border-radius: 4px;

          color: #fff;
          font-size: 20px;
        }
      }
      .agree{
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 12px;
        input{
          width: 12px;
          height: 12px;
          margin-right: 5px;
          border: 1px solid #707070;
          border-radius: 2px;
          
          -webkit-tap-highlight-color: transparent;
          -webkit-appearance: none;
          outline: none;
          background-color: transparent;
          background-size: 8px;
          background-repeat: no-repeat;
          background-position: center;
        }
        span{
          color: #3478F2;
        }
      }
    }
    .hr{
      position: absolute;
      left: 0;
      right: 0;
      background: #F5F5F5;
      width: 100%;
      height: 12px;
    }
    .footer-img{
      padding: 20px 12px;
      .footer-title{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 25px;
        line-height: 25px;
        margin-bottom: 20px;
        .footer-title-img{
          height: 20px;
          img{
            height: 100%;
          }
        }
        .footer-title-text{
          font-size: 18px;
          font-weight: bold;
          color: #464646;
          margin: 0 4px;
        }
      }
      .footer-lists{
        display: flex;
        justify-content: space-between;
        .footer-li{
          font-weight: bold;
          color: #464646;
          text-align: center;
          margin: 0 9px;
          .footer-li-icon{
            width: 35px;
            height: 35px;
            margin: auto;
            margin-bottom: 4px;
          }
          .footer-li-title{
            font-size: 16px;
            height: 22px;
            line-height: 22px;
            margin-bottom: 2px;
          }
          .footer-li-text{
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
    }
    .footer{
      background-color: #F5F5F5;

      padding: 20px 0 50px;
      p{
        display: block;
        margin: 0;
        height: 17px;
        line-height: 17px;
        &.icp{
          color: #3478F2;
        }
      }
    }
  }
}
</style>
